<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改个人信息</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="CSS/blog_update.css">
</head>

<body>
    <!-- 导航栏、左侧用户信息区域、右侧博客列表区域 -->
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo -->
        <img src="./image/logo.png" alt="logo">
        <!-- 标题 -->
        <span class="head">我的博客系统</span>
        <!-- 空白占位符 -->
        <span class="spacer">欢迎来到我的博客~</span>
        <!-- 右侧的几个连接 -->
        <a href="blog_list.html">主页</a>
        <a href="#" id="logout" class="logout">退出</a>
        <a href="blog_register.html">注册</a>
    </div>
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 个人信息卡片 -->
            <div class="card">
                <img src="" alt="点击头像进行上传" id="myphoto" onclick="uploadPhoto()" title="点击头像进行上传">
                <h3></h3>
                <h6></h6>
                <div class="counter">
                    <a href="blog_edit.html">发布文章</a>
                </div>
                <div class="counter">
                    <a href="blog_article.html">文章管理</a>
                </div>
                <div class="counter">
                    <a target="_blank" id="git">我的Gitee</a>
                </div>
            </div>
        </div>
        <div class="right">
            <h2>修改个人信息</h2>
            <p>输入新的信息后点击提交，会将原始数据进行修改</p><br>
            <p>如需修改头像，请点击头像进行新头像上传~</p><br>
            <p>请在需要修改的选项中输入修改的信息，无需修改的信息则可以不填</p><br>
            <div class="row">
                <span>修改昵称:</span>
                <input type="text" class="edit" id="username" name="username" placeholder="请输入新昵称(新用户必须修改昵称后方可正常使用)">
            </div>
            <div class="row">
                <span>修改签名:</span>
                <input type="text" class="edit" id="signature" name="signature" placeholder="请输入新签名">
            </div>
            <div class="row">
                <span>修改登录密码:</span>
                <input type="password" class="edit" id="new1Password" name="new1Password"
                    placeholder="请输入新密码（新密码长度为8-16位）" minlength="8" maxlength="16">
            </div>
            <div class="row">
                <span>原密码:</span>
                <input type="password" class="edit" id="oldPassword" name="oldPassword" placeholder="请输入原始密码">
            </div>
            <div class="row">
                <span>输入确认密码:</span>
                <input type="password" class="edit" id="new2Password" name="new2Password" placeholder="请输入确认密码"
                    minlength="8" maxlength="16">
            </div>
            <div class="row">
                <span>修改邮箱:</span>
                <input type="text" class="edit" id="email" name="email" placeholder="修改邮箱需要获取新邮箱验证码">
            </div>
            <div class="row">
                <input type="button" value="发送验证码" id="sendCode" name="sendCode">
                <input type="text" class="edit" id="emailCode" name="emailCode" placeholder="请输入邮箱验证码">
            </div>
            <div class="row">
                <span>修改gitee地址:</span>
                <input type="text" class="edit" id="gitee" name="gitee" placeholder="请输入新的Gitee地址">
            </div>
            <div class="row">
                <input type="button" value="提 交 信 息" id="submit" name="run">
            </div>
            <!-- <h2>上传个人头像</h2>
            <p>上传新的头像后，头像将会发生改变</p><br>
            <form action="/update/uploadFile" method="post" enctype="multipart/form-data">
                <div class="row">
                    <span>上传新头像:</span>
                    <input type="file" name="myimg" style="font-size: 15px;" value="上传头像">
                </div>
                <div class="row">
                    <input type="submit" value="点 击 上 传">
                </div>
            </form> -->
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            function uploadPhoto() {
                document.getElementById('upload').style.height = "150px";
                document.getElementById('upload').style.width = "450px";
            }
            //隐藏上传文件表单
            function Hide2() {
                document.getElementById('upload').style.height = "0";
                document.getElementById('upload').style.width = "0";
            }
            //上传头像回调函数
            $(function ($) {
                var textStr;
                $("#target").on('load', function () {
                    textStr = $(this);
                    console.log(textStr[0].contentDocument.body.textContent);
                    var result = textStr[0].contentDocument.body.textContent;
                    console.log(result)
                    if (result.indexOf("失败") == -1) {
                        console.log("hello")
                        Hide2();
                        alert("头像上传成功~");
                        window.location.href = "user_update.html";
                    } else {
                        console.log("哈喽")
                        alert("头像上传失败，请稍后重试~");
                        window.location.href = "user_update.html";
                    }
                })
            })
            //处理退出登录请求
            let logoutD = document.querySelector(".logout");
            logoutD.onclick = function () {
                jQuery.getJSON("login/out", {},
                    function (data) {
                        if (data.status == 1) {
                            alert(data.message);
                            window.location.href = 'blog_login.html'
                        }
                    }
                )
            }

            let newName = document.querySelector("#username");
            let newSig = document.querySelector("#signature");
            let new1Pas = document.querySelector("#new1Password");
            let oldPas = document.querySelector("#oldPassword");
            let new2Pas = document.querySelector("#new2Password");
            let emailId = document.querySelector("#email");
            let But = document.querySelector("#sendCode");
            let code = document.querySelector("#emailCode");
            let Gitee = document.querySelector("#gitee");
            let But2 = document.querySelector("#submit");
            //提交需要修改的个人信息
            But2.onclick = function () {
                let res = isOk();
                if (res == true) {
                    jQuery.getJSON("update/uploadMy", {
                            "Uname": jQuery.trim(newName.value),
                            "Usig": jQuery.trim(newSig.value),
                            "Upas1": jQuery.trim(new1Pas.value),
                            "UoldPas": jQuery.trim(oldPas.value),
                            "Upas2": jQuery.trim(new2Pas.value),
                            "Uemail": jQuery.trim(emailId.value),
                            "Ucode": jQuery.trim(code.value),
                            "Ugitee": jQuery.trim(Gitee.value)
                        },
                        function (obj) {
                            if (obj.status == 1) {
                                alert(obj.message);
                                window.location.href = 'blog_list.html';
                            } else {
                                alert(obj.message);
                            }
                        }
                    )
                }
            }
            //验证输入信息的合法性
            function isOk() {
                if (emailId.value != null && code.value == null) {
                    alert("请输入邮箱验证码~");
                    return false;
                }
                if (code.value != null && emailId.value == null) {
                    alert("请输入邮箱信息~");
                    return false;
                }
                if (oldPas.value != "") {
                    if (oldPas.value.length < 8 || oldPas.value.length > 16) {
                        alert("原密码长度不符合要求，请重新输入~");
                        return false;
                    }
                }
                if (oldPas.value == "") {
                    if (new1Pas.value != "" || new2Pas.value != "") {
                        alert("请先输入原始密码再进行密码重置~");
                        return false;
                    }
                }
                if (new1Pas.value.length != new2Pas.value.length) {
                    alert("新置密码与确认密码长度不一致，请核对后重新输入~");
                    return false;
                }
                if (newName.value != null) {
                    if (newName.value == "新手用户") {
                        alert("重置昵称不能为“新手用户”，请重新输入新昵称~");
                        return false;
                    }
                }
                return true;
            }
            //发送验证码逻辑代码
            But.onclick = function () {
                let res = isRightEmailNum();
                if (res == true) {
                    jQuery.getJSON("register/sendEmailCode", {
                            "emailId": jQuery.trim(emailId.value)
                        },
                        function (data) {
                            if (data.status == 1) {
                                alert(data.message);
                            } else {
                                alert(data.message);
                            }
                        })
                }
            }

            function isRightEmailNum() {
                if (emailId.value == null || emailId.value == "") {
                    alert("邮箱为空，请重新输入。");
                    return false;
                } else if (emailId.value.length < 8 || emailId.value.length > 24) {
                    alert("邮箱格式有误，请核对后重新尝试发送。");
                    return false;
                } else {
                    return true;
                }
            }
            //使用ajax请求，向服务器获取当前用户的登录状态
            jQuery.getJSON("update/myMse", {},
                function (obj) {
                    if (obj.status == 1) {
                        buildUser(obj.data);
                    }
                })

            function buildUser(user) {
                let h3 = document.querySelector('.card>h3');
                h3.innerHTML = user.username;
                let h6 = document.querySelector('.card>h6');
                h6.innerHTML = user.signature;
                let gitee = document.querySelector('#git');
                gitee.href = user.gitee;
                let photo = document.querySelector('#myphoto');
                photo.src = user.img;
            }
        </script>
    </div>
</body>
<div id="upload"
    style="height: 0;width:0;background-color: rgba(103, 240, 251, 0.8);transition:all 1s;overflow: hidden;"
    class="center-in-center">
    <form method="POST" enctype="multipart/form-data" action="/update/uploadMyPhoto" id="changePhoto" target="target">
        头像上传:<input type="file" name="myimg" />
        <!--         歌手名: <label>-->
        <!--        <input type="text" name="singer" placeholder="请输入歌手名"/>-->
        <!--        </label> -->
        <input type="submit" value="上传" id="up" />
    </form>
    <button onclick="Hide2()">取消上传</button>
    <iframe name="target" id="target" width="450px" height="50px"></iframe>
</div>
<style type="text/css">
    .center-in-center {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</style>

</html>